<template>
  <div class="dashboard-editor-container">

    <panel-group @handleclick="tabClick" :totalData="totalData" />

    <el-row style="" class="pane-content">
      <dv-scroll-board :config="autoTable" style="width:100%;height:100%;" />

    </el-row>
  </div>
</template>

<script>
  import PanelGroup from '../dashboard/PanelGroup'
  import {
    getHomeData
  } from '@/api/common'
  import {
    getProjectList
  } from '@/api/proList'
  export default {
    name: 'Home',
    components: {
      PanelGroup
    },
    data() {
      return {
        autoTable: {},
        totalData: {
          ctcsum: 0,
          dailysum: 0,
          ctcsuming: 0,
          ctcfeedback: 0,
        },
        tabShow: 4,
        dataTable: [],
        headerTable: ['<span style="font-size:16px;">项目名称</span>', '<span style="font-size:16px;">开工日期</span>',
          '<span style="font-size:16px;">完工日期</span>', '<span style="font-size:16px;">工期</span>',
          '<span style="font-size:16px;">目前阶段</span>'
        ],
      }
    },
    mounted() {
      this.getTotalList()
      this.getListData()
    },
    methods: {
      getTotalList() {
        const that = this
        getHomeData({}).then(res => {
            that.$loadings().close()
            that.totalData = res.data
          })
          .catch(() => {
            that.$loadings().close()
          })
      },
      getListData(page) {
        const that = this
        that.$loadings()
        getProjectList({
          str: '',
          ctcType: -1,
          ctcProgress: 0,
          page: 1,
          limit: 16
        }).then((res) => {
          that.$loadings().close()
          let listData = []
          res.data.map(item => {
            listData.push([item.ctcName,item.startTime,'','',item.phaseName])
          })
          that.autoTable = {
            data: listData, // 表数据
            header: that.headerTable, // 表头数据
            rowNum: 16, // 表行数
            headerBGC: '#d7dde0', // 表头背景色
            oddRowBGC: '#f5f7fa', // 奇数行背景色
            evenRowBGC: '#fff', // 偶数行背景色
            waitTime: 1000, // 轮播时间间隔(ms)
            align: 'center'
          }
        }).catch(() => {
          that.$loadings().close()
        })
      },
      tabClick(type) {
        this.tabShow = type
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .pane-content {
    height: calc(100vh - 274px);
  }

  .dv-scroll-board {
    color: #666;
    // width: 100%;
    // height: 100%;

    .header {
      font-size: 20px;
      color: #91a0b9;
      text-align: center;
      white-space: nowrap;
    }

    ::v-deep.rows .row-item {
      // font-size: 15px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
